<template>
  <div class="login_content">
    <!-- color: String类型。默认’#dedede’。粒子颜色。
    particleOpacity: Number类型。默认0.7。粒子透明度。
    particlesNumber: Number类型。默认80。粒子数量。
    shapeType: String类型。默认’circle’。可用的粒子外观类型有：“circle”,“edge”,“triangle”, “polygon”,“star”。
    particleSize: Number类型。默认80。单个粒子大小。
    linesColor: String类型。默认’#dedede’。线条颜色。
    linesWidth: Number类型。默认1。线条宽度。
    lineLinked: 布尔类型。默认true。连接线是否可用。
    lineOpacity: Number类型。默认0.4。线条透明度。
    linesDistance: Number类型。默认150。线条距离。
    moveSpeed: Number类型。默认3。粒子运动速度。
    hoverEffect: 布尔类型。默认true。是否有hover特效。
    hoverMode: String类型。默认true。可用的hover模式有: “grab”, “repulse”, + “bubble”。
    clickEffect: 布尔类型。默认true。是否有click特效。
    clickMode: String类型。默认true。可用的click模式有: “push”, “remove”, “repulse”, “bubble”。
    -->
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="50"
      shapeType="star"
      :particleSize="4"
      linesColor="#f60"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.5"
      :linesDistance="300"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    >
    </vue-particles>

    <div class="login_btn">
      <div class="login_logo">
        <img class="logo_img" src="../assets/login/wt.jpg" alt="" />
        <span>个人管理系统</span>
      </div>
      <div>
        <el-button
          style="margin-right: 40px"
          size="medium "
          type="text"
          @click="hintBtn"
          >访客</el-button
        >
        <!-- <el-button type="text" @click="show = !show">{{
          show == true ? "返回" : "登录"
        }}</el-button> -->
      </div>
    </div>
    <div class="login_box">
      <div class="login-title"><span>个人知识库</span></div>
      <div class="box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          hide-required-asterisk="true"
          label-width="70px"
          class="demo-ruleForm"
        >
          <el-form-item label="账户" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="ruleForm.password"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="register-text"><span>没有账号？去<span class="register" @click="register">注册>></span></span></div>
    </div>
  </div>
</template>

<script>
import local from "@/utlis/local.js";
export default {
  data() {
    return {
      show: false,
      ruleForm: {
        name: "",
        password: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            min: 6,
            max: 11,
            message: "请输入6至11位账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 16,
            message: "请输入6至16位密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        //valid是个bool值，true验证成功，false验证失败
        if (valid) {
          this.$message({
            message: "登录成功",
            type: "success",
          });
          local.set("roles", "admin");
          local.set("tk", "dyguhcu1515484");
          this.$router.push("/");
        } else {
          console.log("error 登录失败了!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    hintBtn() {
      this.$message({
        message: "暂不支持访客使用系统！",
        type: "error",
      });
    },
    register(){
      this.$router.push("/register")
    },
  },
};
</script>

<style lang="less" scoped>
.login_content {
  height: 100%;
  width: 100%;
  background-image: url("../assets/login/wt.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .lizi {
    // background-color: #006699;
    // z-index: 999999;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .login_btn {
    display: flex;
    justify-content: space-between;
    height: 100px;
    align-items: center;
    padding: 0 80px;
    box-sizing: border-box;
    position: relative;
    top: 0;

    .login_logo {
      font-size: 30px;
      color: #fff;
      display: flex;
      align-items: center;
      .logo_img {
        width: 80px;
        margin-right: 40px;
      }
    }
    .el-button--text {
      font-size: 20px !important;
      color: #fff;
    }
  }
  .login_box {
    width: 500px;
    height: 300px;
    background: #0490d648;
    display: flex;
    flex-direction: column;
    justify-content: right;
    box-sizing: border-box;
    border: 1px solid #006699;
    border-radius: 5%;
    position: fixed;
    top: 30%;
    left: 60%;
    .box {
      width: 500px;
      height: 300px;
      background-color: transparent;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .login-title{
      width: 100%;
      line-height: 60px;
      color: #fff;
      font-weight: 500;
      font-size: 28px;
      padding-left: 20px;
    }
    .register-text{
      width: 100%;
      line-height: 40px;
      color: #fff;
      display: flex;
      justify-content: center;
      .register{
        color: #f60;
        margin-left: 5px;
        cursor: pointer;
      }
    }
  }
  .login_main {
    background-image: -webkit-linear-gradient(
      bottom,
      rgb(155, 9, 247),
      rgb(24, 228, 116),
      rgb(20, 11, 255)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 250px;
  }
}
:deep(.el-form-item__label) {
  color: #fff !important;
  font-size: 18px;
}
:deep(.el-input__inner) {
  background-color: transparent;
  color: #fff;
  width: 250px;
}
</style>
